<ul class="btn-list clearfix">
  <li>
    <button type="button" class="btn btn-primary btn-icon">
      <i class="ion-md-download"></i></button>
  </li>
  <li>
    <button type="button" class="btn btn-default btn-icon">
      <i class="ion-md-wifi"></i></button>
  </li>
  <li>
    <button type="button" class="btn btn-success btn-icon">
      <i class="ion-md-checkmark-circle"></i></button>
  </li>
  <li>
    <button type="button" class="btn btn-info btn-icon">
      <i class="ion-md-information-circle-outline"></i></button>
  </li>
  <li>
    <button type="button" class="btn btn-warning btn-icon">
      <i class="ion-md-warning"></i></button>
  </li>
  <li>
    <button type="button" class="btn btn-danger btn-icon">
      <i class="ion-md-nuclear"></i></button>
  </li>
</ul>

<h5 class="panel-subtitle">Buttons with icons</h5>

<ul class="btn-list clearfix">
  <li>
    <button type="button" class="btn btn-primary btn-with-icon">
      <i class="ion-md-download"></i>Primary</button>
  </li>
  <li>
    <button type="button" class="btn btn-default btn-with-icon">
      <i class="ion-md-wifi"></i>Default</button>
  </li>
  <li>
    <button type="button" class="btn btn-success btn-with-icon">
      <i class="ion-md-checkmark-circle"></i>
      <span>Success</span>
    </button>
  </li>
  <li>
    <button type="button" class="btn btn-info btn-with-icon">
      <i class="ion-md-information-circle"></i>Info</button>
  </li>
  <li>
    <button type="button" class="btn btn-warning btn-with-icon">
      <i class="ion-md-warning"></i>Warning</button>
  </li>
  <li>
    <button type="button" class="btn btn-danger btn-with-icon">
      <i class="ion-md-nuclear"></i>Danger</button>
  </li>
</ul>
